{% import "bootstrap/wtf.html" as wtf %}

<div class="panel panel-info col-xs-12" id="edit_comment">
    <div class="panel-heading">
    	发表评论
    </div>
    <div class="panel-body">
	    {% if current_user.is_authenticated %}
    	<form role="form" action="" method="post">
    		{{ commentform.csrf_token }}
    		<div class="form-group" style="margin-bottom: 0px;">
    			{{ commentform.body.label }}
                <div hidden>
                {{ commentform.body(class ="form-control")}}
                </div>
    		</div>
		    <div id="editor" style="margin-bottom: 15px; background-color: #fff;">
		    </div>
    	   <button class="btn btn-info" id="submit1">发布</button>
        </form>
	    <script src="{{ url_for('static',filename='js/wangEditor.min.js') }}"></script>
	    <script type="text/javascript">
	        var E = window.wangEditor
	        var editor = new E('#editor')
	        var $body = $('#body')
	        editor.customConfig.onchange = function (html) {
	            // 监控变化，同步更新到 textarea
	            $body.val(html)
	        }
		    editor.customConfig.menus = [
			    'head',  // 标题
			    'bold',  // 粗体
			    'italic',  // 斜体
			    'underline',  // 下划线
			    'strikeThrough',  // 删除线
			    'foreColor',  // 文字颜色
			    'backColor',  // 背景颜色
			    'link',  // 插入链接
			    'list',  // 列表
			    'justify',  // 对齐方式
			    'quote',  // 引用
			    'image',  // 插入图片
			    'table',  // 表格
			    'code',  // 插入代码
			    'undo',  // 撤销
			    'redo'  // 重复
		    ]       
	        editor.create();
	        $body.val(editor.txt.html())
			// $('#reply').click(function(){
   //          	editor.txt.append('<p>用 JS 设置的内容</p>');
   //      	});
	    </script>
    	{% else %}
		<div class="alert alert-info">你还没有登录</div>	
		{% endif %}
    </div>
</div>